<template>
  <div class="my">
    <!-- 顶部导航栏 vantui-导航组件-NavBar -->
    <van-icon
      name="setting-o"
      size="30px"
      class="set_icon"
      @click="$router.push('/setting')"
    ></van-icon>
    <!-- 个人头像信息页 vantui-基础组件-Image -->
    <div class="img_box" @click="toLogin">
      <img :src="img" />
    </div>
    <div class="my_box">
      <div style="text-align: center; margin-top: 50px">
        <div
          style="font-weight: bold; font-size: 24px; color: #333"
          v-if="userInfo"
        >
          {{ userInfo.user_name }}
        </div>
        <div style="font-weight: 600; font-size: 22px; color: #333" v-else>
          未登录
        </div>
        <div style="font-size: 14px; color: #bbb; margin-top: 5px">
          爱生活 生活需要一点乐趣
        </div>
      </div>
      <!-- 功能图标 -->
      <div class="menu1">
        <div class="menu_box" @click="$router.push('/vip')">
          <img src="../../assets/image/1.png" alt="" />
          <div>订购会员</div>
        </div>
        <div class="menu_box" @click="showShare = true">
          <img src="../../assets/image/2.png" alt="" />
          <div>邀请好友</div>
        </div>
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
        <div class="menu_box">
          <img src="../../assets/image/3.png" alt="" />
          <div>我的收藏</div>
        </div>
      </div>
      <div class="menu2">
        <div class="menu_box">
          <img src="../../assets/image/4.png" alt="" />
          <div>在线客服</div>
        </div>
        <div class="menu_box" @click="$router.push('/bindbankcard')">
          <img src="../../assets/image/5.png" alt="" />
          <div>绑定支付</div>
        </div>
        <div class="menu_box" @click="$router.push('/commoninfo')">
          <img src="../../assets/image/6.png" alt="" />
          <div>常用信息</div>
        </div>
      </div>

      <div class="btn_login" v-if="!uid">
        <van-button @click="toLogin">点击登录</van-button>
      </div>

      <div class="th" v-else>
        <span>向朋友推荐</span>
        <span>意见反馈</span>
        <span>打分鼓励一下</span>
        <span>关于我们</span>
      </div>

      <!-- 底部导航栏 tabbar-->
      <bottom-tabbar class="bottom" />
    </div>
  </div>
</template>
<script>
import BottomTabbar from "@/components/BottomTabbar.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      uid: sessionStorage.getItem("uid") || "",
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  computed: {
    ...mapState({ userInfo: ((state) => state.user.userInfo) || "" }),
    img() {
      let info = this.userInfo || "";
      if (info) {
        if (info.user_img) return info.user_img;
        else return "/mine/mr.png";
      } else {
        return "/mine/mr.png";
      }
    },
  },
  mounted() {
    this.$store.dispatch("getUserInfo", this.uid);
  },
  activated() {
    this.uid = sessionStorage.getItem("uid") || "";
    this.$store.dispatch("getUserInfo", this.uid);
  },
  methods: {
    toLogin() {
      this.$router.push("/login");
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
  components: { BottomTabbar },
};
</script>
<style lang="scss" scoped>
.my {
  position: relative;
  height: 100vh;
  background-image: url("/public/mine/my-bg2.jpg");
  background-size: 100%;
}
.set_icon {
  position: absolute;
  top: 20px;
  right: 20px;
}
.my_box {
  width: 100vw;
  height: 80vh;
  border-radius: 20px 20px 0 0;
  position: absolute;
  bottom: 0;
  text-align: center;
  background-color: #fff;
}
.img_box {
  text-align: center;
  position: absolute;
  width: 100vw;
  top: 11vh;
  z-index: 3;
  img {
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    width: 7em;
    height: 7em;
  }
}
.menu1,
.menu2 {
  position: absolute;
  top: 20vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .menu_box {
    width: 30%;
    margin: 0 10px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    img {
      display: block;
      width: 46px;
    }
    div {
      text-align: center;
      width: 100%;
      margin-top: 10px;
      color: #aaa;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 1px;
      font-family: Arial, Helvetica, sans-serif;
    }
  }
}
.menu2 {
  top: 35vh;
}

.btn_login {
  position: absolute;
  width: 100vw;
  top: 55vh;
  display: flex;
  justify-content: center;
  button {
    background-color: #f5b400;
    color: #fff;
    width: 70vw;
    border-radius: 30px;
    height: 48px;
    font-size: 16px;
  }
}
.th {
  width: 100vw;
  top: 55vh;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  span {
    height: 40px;
    color: #bbb;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
    display: inline-block;
    width: 48%;
  }
}
.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>
